<template>
    <div class="container">
        <el-card>
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="租箱量" name="rentalQuantity"></el-tab-pane>
                <el-tab-pane label="箱贴" name="boxStickers"></el-tab-pane>
            </el-tabs>
        </el-card>
        <template v-if="activeName=='rentalQuantity'">
            <el-card class="marginTop20">
                <span class="_before">租箱量-日期分析</span>
                <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" :showCompanyName="true" :companyName="companyName" @updateValue='getCallbackDate'></ControlPanel>
                <StackedLine :config="stackedLineConfig" @packedBoxQuantity="packedBoxQuantity" @returnBoxQuantity="returnBoxQuantity"></StackedLine>
            </el-card>
            <el-card class="marginTop20">
                <span class="_before">租箱量-未还分析</span>
                <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="false" :showBoxTool="true" :showSortByField="false" :showCompanyName="false" :companyName="companyName" @updateValue='getCallbackNotReturn'></ControlPanel>
                <Bar2 :config="bar2Config"></Bar2>
            </el-card>
            <el-card class="marginTop20">
                <span class="_before">租箱量-箱东分析</span>
                <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" :showCompanyName="false" :companyName="companyName" @updateValue='getCallbackBoxEast'></ControlPanel>
                <BarLine1 :config="barLine1Config" @barClick="barClick"></BarLine1>
                <div class="line"><div /></div>
                <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="false" :showBoxTool="true" :showSortByField="true" :showCompanyName="false" :companyName="companyName" @updateValue='getCallbackBoxEastNotReturn'></ControlPanel>
                <TwoBar2 :config="twoBar2Config"  @barClick="handleBarClick"></TwoBar2>
            </el-card>
        </template>
        <template v-if="activeName=='boxStickers'">
            <el-card class="marginTop20 text-center">
                箱贴-暂无数据
            </el-card>
        </template>

        <el-dialog v-model="bar3Dialog" destroy-on-close title="租箱量-出发城市分析" width="1000">
            <Bar3 :config="bar3Config" :visible="bar3visible" @barClick="toBar4"></Bar3>
        </el-dialog>
        <el-dialog v-model="line3Dialog" destroy-on-close title="租箱量-箱东日期分析" width="1000">
            <ControlPanel :sources="1"  :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" :showCompanyName="true" :companyName="companyName" @updateValue='getCallbackBoxEastDate'></ControlPanel>
            <Line3 :config="line3Config" :visible="line3visible"></Line3>
        </el-dialog>
        <el-dialog v-model="twoBar3Dialog" destroy-on-close title="租箱量-到达城市分析" width="1000">
            <ControlPanel :sources="1"  :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="false" :showBoxTool="true" :showSortByField="true" :showCompanyName="true" :companyName="companyName" @updateValue='getCallbackBoxEastNotReturnCity'></ControlPanel>
            <TwoBar3 :config="twoBar3Config" :visible="twoBar3visible"></TwoBar3>
        </el-dialog>
        <el-dialog v-model="bar4Dialog" destroy-on-close title="租箱量-到达城市分析" width="1000">
            <Bar4 :config="bar4Config" :visible="bar4visible"></Bar4>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import ControlPanel from '@/views/businessAnalysis/controlPanel'
import { callbackDate,callbackNotReturn,callbackBoxEast,callbackBoxEastNotReturn,callbackBoxEastNotReturnCity,callbackCarryCity,callbackReturnCity,callbackBoxEastDate } from '@/api/businessAnalysis'
import StackedLine from '@/views/businessAnalysis/chart/stackedLine'
import Bar2 from '@/views/businessAnalysis/chart/bar2'
import BarLine1 from '@/views/businessAnalysis/chart/barLine1'
import TwoBar2 from '@/views/businessAnalysis/chart/twoBar2'
import TwoBar3 from '@/views/businessAnalysis/chart/twoBar3'
import Bar3 from '@/views/businessAnalysis/chart/bar3'
import Bar4 from '@/views/businessAnalysis/chart/bar4'
import Line3 from '@/views/businessAnalysis/chart/line3'
import Cookies from 'js-cookie'
import { ref,reactive,onMounted } from 'vue'
const activeName = ref('rentalQuantity')
let companyId:any
let companyName:any
try { 
    companyId =   JSON.parse(Cookies.get('User-Info')).companyId
    companyName =   JSON.parse(Cookies.get('User-Info')).companyName
} catch (error) {
    companyId =   Cookies.get('User-Info').companyId
    companyName =  Cookies.get('User-Info').companyName
}


// 获取当前日期
const currentDate = new Date();
const currentDateStr = getFormattedDate(currentDate);

// 获取7天后的日期
const futureDate = new Date();
futureDate.setDate(currentDate.getDate() + 6);
const futureDateStr = getFormattedDate(futureDate);

const timeInterval = ref([currentDateStr,futureDateStr]) //查询时间区间
const cityInfo = ref([])
let cahrtData = reactive({
    dataType:'3',
    timePeriod:[currentDateStr,futureDateStr],
    boxType:'1',
    boxCondition:'1',
    sortByField:'5',
    companyId:'',
    dataTime:currentDateStr,
    companyName:companyName,
    cityId:''
})


// 租箱量-日期分析
let stackedLineConfig = reactive({ 
    xAxisData:[],
    packedBoxQuantity:[],
    returnBoxQuantity:[]
})
const getCallbackDate = async (_row: any) => {
    cahrtData.dataType = _row.dataType
    cahrtData.boxType = _row.boxType
    cahrtData.boxCondition = _row.boxCondition
    let reqParams = {
        dataType:_row.dataType,
        beginDataTime: _row.timePeriod[0],
        endDataTime: _row.timePeriod[1],
        boxType:_row.boxType == '1'?'':_row.boxType,
        boxCondition:_row.boxCondition == '1'?'':_row.boxCondition
    }
    await callbackDate(reqParams).then(res => { 
        if(res.code == '00000' && res.data.length > 0){ 
            stackedLineConfig.xAxisData.length = 0
            stackedLineConfig.packedBoxQuantity.length = 0
            stackedLineConfig.returnBoxQuantity.length = 0
            res.data.forEach(item => { 
                stackedLineConfig.xAxisData.push(item.dataTime)
                stackedLineConfig.packedBoxQuantity.push(item.packedBoxQuantity)
                stackedLineConfig.returnBoxQuantity.push(item.returnBoxQuantity)
            })
        }
    })
}
const bar3Dialog = ref(false)
const bar3visible = ref(false)
const packedBoxQuantity = (row:any)=>{ //点击已提回调箱量  
    cahrtData.dataTime = row.name
    bar3Config.legendName = row.seriesName
    bar3Config.title = row.name
    getCallbackCarryCity(cahrtData)
    bar3visible.value = true
    bar3Dialog.value = true
}
const returnBoxQuantity = (row:any)=>{ //点击已还回调箱量 
    cahrtData.dataTime = row.name
    bar3Config.legendName = row.seriesName
    bar3Config.title = row.name
    getCallbackCarryCity(cahrtData)
    bar3visible.value = true
    bar3Dialog.value = true
}
// 租箱量-未还分析
let bar2Config = reactive({ 
    xAxisData:['未还','即将超期(<=10)','超期'],
    yAxisData:['10','20','10']
})
const getCallbackNotReturn = async (_row: any) => { 
    let reqParams = {
        boxType:_row.boxType == '1'?'':_row.boxType,
        boxCondition:_row.boxCondition == '1'?'':_row.boxCondition
    }
    await callbackNotReturn(reqParams).then(res => { 
        if(res.code == "00000" && res.data.notReturnQty){
            bar2Config.yAxisData.length = 0
        
            bar2Config.yAxisData[0] = res.data.notReturnQty
            bar2Config.yAxisData[1] = res.data.nearOverdueUnReturnQty
            bar2Config.yAxisData[2] = res.data.overdueUnReturnQty
        }
    })
}

// 租箱量-箱东分析
let barLine1Config = reactive({
    xAxisData: ['亚航','陆海'],
    yAxisDataBar:['100','200'],
    yAxisDataLine:['33','66'],
    barLine1Res:[]
})
const getCallbackBoxEast = async (_row: any) => {
    cahrtData.dataType = _row.dataType
    cahrtData.timePeriod = _row.timePeriod
    cahrtData.boxType = _row.boxType
    cahrtData.boxCondition = _row.boxCondition
    let reqParams = {
        dataType:_row.dataType,
        beginDataTime: _row.timePeriod[0],
        endDataTime: _row.timePeriod[1],
        boxType:_row.boxType == '1'?'':_row.boxType,
        boxCondition:_row.boxCondition == '1'?'':_row.boxCondition
    }
    await callbackBoxEast(reqParams).then(res => { 
        if(res.code == '00000' && res.data.length > 0){
            barLine1Config.xAxisData.length = 0
            barLine1Config.yAxisDataBar.length = 0
            barLine1Config.yAxisDataLine.length = 0
            barLine1Config.barLine1Res.length = 0
            res.data.forEach(item => { 
                barLine1Config.xAxisData.push(item.companyName)
                barLine1Config.yAxisDataBar.push(item.boxQuantity)
                barLine1Config.yAxisDataLine.push(item.proportion)
                const companyInfo = {companyId: item.companyId,companyName:item.companyName}
                barLine1Config.barLine1Res.push(companyInfo)
            })
        }
    })
}
const line3Dialog = ref(false)
const line3visible = ref(false)
const barClick = (row:any)=>{ 
    console.log("row11111111",row)
    line3Config.legendName = row.seriesName
    companyName = row.name
    barLine1Config.barLine1Res.forEach(item => { 
        if(item.companyName == row.name) { 
            cahrtData.companyId = item.companyId
            line3Config.companyId = item.companyId
        }
    })
    debugger
    getCallbackBoxEastDate(cahrtData)
    line3visible.value = true
    line3Dialog.value = true
}

// 租箱量-箱东日期分析
const line3Config = reactive({
    xAxisData:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
    yAxisData:["10","20","30","40","50","60","70","80","90","100","110","120"],
    companyId: '',
})

const getCallbackBoxEastDate = async (_row:any)=>{ 
    let reqParams = { 
        companyId: _row.companyId || line3Config.companyId,
        dataType:_row.dataType,
        beginDataTime: _row.timePeriod[0],
        endDataTime: _row.timePeriod[1],
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition:_row.boxCondition == '1'?'':_row.boxCondition
    }
    await callbackBoxEastDate(reqParams).then(res =>{ 
        if(res.code == '00000' && res.data.length > 1){
            line3Config.xAxisData.length = 0
            line3Config.yAxisData.length = 0
            res.data.forEach(item => { 
                line3Config.xAxisData.push(item.dataTime)
                line3Config.yAxisData.push(item.boxQuantity)
            });
        }
    })
}

let twoBar2Config = reactive({
    xAxisData:['亚航','陆海','亚航1','陆海1',],
    yAxisNormalDataBar:[10,20,30,10],
    yAxisOverDataBar:[30,10,18,20]
})
const getCallbackBoxEastNotReturn = async (_row: any)=>{ 
    let reqParams = {
        boxType:_row.boxType == '1'?'':_row.boxType,
        boxCondition:_row.boxCondition == '1'?'':_row.boxCondition,
        sortByField:_row.sortByField
    }
    await callbackBoxEastNotReturn(reqParams).then(res => { 
        if(res.code == '00000' && res.data.length > 0){
            twoBar2Config.xAxisData.length = 0
            twoBar2Config.yAxisNormalDataBar.length = 0
            twoBar2Config.yAxisOverDataBar.length = 0
            res.data.forEach(item => { 
                twoBar2Config.xAxisData.push(item.cityName)
                twoBar2Config.yAxisNormalDataBar.push(item.normalUnReturnQty)
                twoBar2Config.yAxisOverDataBar.push(item.overdueUnReturnQty)
            })
        }
    })
}
const twoBar3Dialog = ref(false)
const twoBar3visible = ref(false)
const handleBarClick = (row:any) => { 
    console.log("123123123",row)
    getCallbackBoxEastNotReturnCity(cahrtData)
    twoBar3visible.value = true
    twoBar3Dialog.value = true
}

// 租箱量-到达城市分析
let twoBar3Config = reactive({
    xAxisData: ["郑州","天津","大连","青岛"],
    yAxisNormalDataBar: [20,50,40,60],
    yAxisOverDataBar: [30,10,49,20]
})
const getCallbackBoxEastNotReturnCity= async(_row: any) => { 
    let reqParams = reactive({
        companyId:companyId,
        boxType:_row.boxType == '1'?'':_row.boxType,
        boxCondition:_row.boxCondition == '1'?'':_row.boxCondition,
        sortByField:_row.sortByField
    })
    await callbackBoxEastNotReturnCity(reqParams).then(res => { 
        if(res.code == '00000' && res.data.length > 0){
            twoBar3Config.xAxisData.length = 0
            twoBar3Config.yAxisNormalDataBar.length = 0
            twoBar3Config.yAxisOverDataBar.length = 0
            res.data.forEach(item => { 
                twoBar3Config.xAxisData.push(item.cityName)
                twoBar3Config.yAxisNormalDataBar.push(item.normalUnReturnQty)
                twoBar3Config.yAxisOverDataBar.push(item.overdueUnReturnQty)
            })
        }
    })
}

//租箱量-出发城市分析
let bar3Config = reactive({
    title:'',
    legendName: '',
    xAxisData:['青岛','武汉','徐州','上海'],
    yAxisData:[10,20,10,20,],
})
const getCallbackCarryCity = async (_row:any) => {
    let reqParams = { 
        dataType:_row.dataType,
        dataTime:_row.dataTime,
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition,
    }
    await callbackCarryCity(reqParams).then(res => { 
        if (res.code == '00000' && res.data.length > 0) {
            bar3Config.xAxisData.length = 0
            bar3Config.yAxisData.length = 0
            cityInfo.value.length = 0
            res.data.forEach(item => { 
                bar3Config.xAxisData.push(item.cityName)
                bar3Config.yAxisData.push(item.boxQuantity)
                let cityItem = {cityId:item.cityId,cityName:item.cityName}
                cityInfo.value.push(cityItem)
            })
        }
    }) 
}

const bar4Dialog = ref(false)
const bar4visible = ref(false)
const toBar4 = async (row:any) => { 
    // console.log("row1111",row)
    // console.log("cityInfo.value",cityInfo.value)
    // console.log(cahrtData)
    cityInfo.value.forEach(item=>{ 
        if(item.cityName == row.name){
            cahrtData.cityId = item.cityId
        }
    })
    bar4Config.legendName = row.seriesName
    console.log(cahrtData)
    getCallbackReturnCity(cahrtData)
    bar4visible.value = true
    bar4Dialog.value = true
    
}
// 租箱量-到达城市分析
let bar4Config = reactive({
    xAxisData:['亚航','亚航1','亚航2','亚航3'],
    yAxisData:[10,11,9,6,16],
    legendName:''
})
const getCallbackReturnCity = async(_row:any) => { 
    let reqParams = {
        dataType:_row.dataType,
        dataTime: _row.dataTime,
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition,
        carryCityId: _row.cityId
    } 
    await callbackReturnCity(reqParams).then(res =>{
        if(res.code == '00000' && res.data.length > 0){
            bar4Config.xAxisData.length = 0
            bar4Config.yAxisData.length = 0
            res.data.forEach(item => {
                bar4Config.xAxisData.push(item.cityName)
                bar4Config.yAxisData.push(item.boxQuantity)
            })
        }
    })
}




function formatDateString(dateStr: string): string {
  const match = dateStr.match(/^(\d{4})(\d{2})(\d{2})$/);
  if (!match) throw new Error("Invalid date format");

  const [, year, month, day] = match;
  return `${year}年${parseInt(month)}月${parseInt(day)}日`;
}
onMounted(() => {
    getCallbackDate(cahrtData)
    getCallbackNotReturn(cahrtData)
    getCallbackBoxEast(cahrtData)
    getCallbackBoxEastNotReturn(cahrtData)
    // getCallbackCarryCity(cahrtData)
    // getCallbackReturnCity(cahrtData)
})


// 获取时间区间
function getFormattedDate(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}${month}${day}`;
}
</script>

<style lang="scss" scoped>
.container{
    padding: 0 20px;
    .line{
        height: 50px;
    }
}
</style>